<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义属性演示</title>
</head>
<body>
<style>
/* 全局 */
:root {
  --test-color: red;
}
/* 局部 */
.two {
  --test-color: green;
}
.three {
  --test-color: blue;
}
/* 调用（定义） */
.one { color: var(--test-color); }  /* 红色 */
.two { color: var(--test-color); }  /* 绿色 */
.three { color: var(--test-color); } /* 蓝色 */
.five { background-color: var(--test-no-color, pink ); } /* 蓝色文字，粉色背景 */
</style>
<div class="one">
  样式1.红色文字
  <div class="two">
   样式2.绿色文字
    <div class="three">样式3.蓝色文字</div>
    <div class="four">样式4.绿色文字</div>
    <div class="five">样式5.绿色文字，粉色背景</div>
  </div>
</div>
</body>
</html>